<!--
 * @Author: lp
 * @Date: 2022-02-08 11:30:58
 * @LastEditTime: 2022-06-18 17:41:06
 * @LastEditors: lp 654528967@qq.com
 * @Description: 全局分页
 * @FilePath: //nien-vue3-admin//src//components//pagination//index.vue
-->
<template>
  <div :class="{ hidden: hidden }" class="pagination-container">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :background="background"
      :pager-count="9"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { scrollTo } from '@/utils/scrollTo'

const props = withDefaults(
  defineProps<{
		total: number;
		page: number;
		limit: number;
		pageSizes?: number[];
		layout?: string;
		background?: boolean;
		autoScroll?: boolean;
		hidden?: boolean;
	}>(),
  {
    total: 0,
    page: 1,
    limit: 10,
    pageSizes: () => [10, 50, 100, 500, 1000, 1500],
    layout: 'total, sizes, prev, pager, next, jumper',
    background: true,
    autoScroll: true,
    hidden: false,
  },
)
const currentPage = computed<number>({
  get() {
    return props.page
  },
  set(val) {
    emit('update:page', val)
    return val
  },
})
const pageSize = computed<number>({
  get() {
    return props.limit
  },
  set(val) {
    emit('update:limit', val)
    return val
  },
})
const emit = defineEmits(['pagination', 'update:page', 'update:limit'])
const handleSizeChange = (val: number) => {
  pageSize.value = val
  emit('pagination', { page: currentPage.value, limit: val })
  props.autoScroll && scrollTo(0, 800)
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  emit('pagination', { page: val, limit: pageSize.value })
  props.autoScroll && scrollTo(0, 800)
}
</script>

<style lang="less" scoped>
@txtColor:#7a8298;
.pagination-container {
  background: #fff;
  padding: 16px 0 0;
  display: flex;
  justify-content: flex-end;
  .el-pagination {
    --el-pagination-text-color: @txtColor;
    --el-text-color-regular: @txtColor;
    --el-pagination-button-height: 30px;

    padding: 0;
  }
  &.hidden {
    display: none;
  }
}
</style>
